<template>
  <div>222
    <!--菜单
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>:collapse="isCollapse"-->
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <i class="el-icon-location"></i>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item one</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    <el-menu
      ref="domMenu"
      :default-active="tabState.activeModuleId"
      class="el-menu-vertical-demo"
      @select="select"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu
        v-for="item in $state.projectMeta.menu.filter(a => a.parentId===0)"
        :key="'menu_' + item.id"
        :index="item.id"
      >
        <template #title>
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="item2 in $state.projectMeta.menu.filter(a => a.parentId===item.id)"
            :key="'submenu_' + item2.id"
            :index="item2.id"
          >{{item2.title}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
// 模块菜单
import { onMounted, ref, reactive } from 'vue'

// tab 的状态
import tabManage from '../../controller/state-tab.js'

</script>

<script setup>

// 是否折叠菜单
const isCollapse = ref(false)

// 列表的状态管理类
const { getState } = tabManage()
// 获取 tab 的状态
const tabState = getState()

// 自动展开菜单用
const domMenu = ref(null)

onMounted(() => {
  setTimeout(() => {
    domMenu.value.open('100')
    domMenu.value.open('101')
  }, 2000)
})

// 二级菜单被选中
const select = (index, indexPath) => {
  console.log('当前激活节点', index, indexPath)
  // 设置状态，交给 tab 组件处理，tab 会监听
  tabState.openModudle(index)
}

const handleOpen = (key, keyPath) => {
  console.log('handleOpen', key, keyPath)
}

const handleClose = (key, keyPath) => {
  console.log('handleClose', key, keyPath)
}

</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    max-width: 160px;
    min-height: 400px;
  }
</style>
